<template>
  <div>
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="送货时间"
      placeholder="请选择送货时间"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择日期时间"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [
            {
              text: "杭州市",
              value: "330100",
              children: [{ text: "西湖区", value: "330101" }],
            },
          ],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
      // 源数据
      originData: {
        BuyMaxTime: 300, // 最长选择时间/分钟
        BuyMinTime: 30, // 最短选择时间/分钟
        BuyTimeUnitInterval: 20, // 分钟间隔
      },
    };
  },
  mounted() {
      this.initTime(this.originData);
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("");
    },
    // 初始化时间
    initTime({BuyMaxTime, BuyMinTime, BuyTimeUnitInterval}) {
        
        // 获取当前时间
        const myDate = new Date();
        const mounth = myDate.getMonth() + 1;
        const date = myDate.getDate();
        let hour = myDate.getHours();
        let minute = myDate.getMinutes();

        // 计算加上最小时间的 最终时间
        const newMinute = (minute + BuyMinTime) % 60;
        hour = hour + parseInt((minute + BuyMinTime) / 60);
        

        // 获取日期数组
        const options = [];

        const dayNum = Math.floor(BuyMaxTime / 60 / 24);
        
        for(let i = 0; i < dayNum + 1; i++) {
            options.push({
                text: `${mounth}月${date + i}日`,
                value: `${mounth}-${date+i}`,
                children: this.getHours(BuyTimeUnitInterval)
            })
        }

        // 处理第一天和最后一天的限制小时数
        this.options = this.handleFirstDayHours(options, hour, newMinute);
        this.options = this.handleEndDayHours(options, BuyMaxTime, hour);

        // 处理第一天和最后一天的限制分钟数
        this.options = this.handleFirstDayMin(options, newMinute);
        this.options = this.handleEndDayMin(options, newMinute);

        this.$forceUpdate();
    },
    // 处理第一天小时起点
    handleFirstDayHours(options, hour) {
        const children = options[0].children;
        let curIndex
        children.forEach((item, index) => {
            if(item.value === hour) {
                curIndex = index;
            }
        })
        
        const newChildren = children.slice(curIndex);
        options[0].children = newChildren;
        return options
    },
    // 处理最后小时终点
    handleEndDayHours(options, BuyMaxTime, hour) {
        const endHours = parseInt((BuyMaxTime / 60) % 24);
        console.log('endHours', hour + endHours);
        options[options.length - 1].children = options[options.length - 1].children.slice(0, -(24 - (hour + endHours)));

        return options
    },
    handleFirstDayMin(options, newMinute) {
        const minutes = options[0].children[0].children;
        let index = 0;
        for(let i=0; i < minutes.length; i++) {
            if(minutes[i].value > newMinute) {
                index = i;
                break;
            }
        }
        
        options[0].children[0].children = minutes.slice(index)
        return options;
    },
    handleEndDayMin() {

    },

    getHours(BuyTimeUnitInterval) {
        const ret = [];
        
        for(let i=0; i<24; i++) {
            ret.push({
                text:`${i+1}时`,
                value: i+1,
                children: this.getMin(BuyTimeUnitInterval)
            });
        }
        return ret
    },
    getMin(BuyTimeUnitInterval) {
        const ret = [];
        const frequency = Math.floor(60 / BuyTimeUnitInterval);
        for(let i = 0; i < frequency; i++) {
            BuyTimeUnitInterval
            ret.push({
                text: `${BuyTimeUnitInterval*i}分`,
                value: BuyTimeUnitInterval*i
            })
        }
        return ret
    }
  },
};
</script>
